<template>
    <div class="container">
        <el-dialog :title="title" :visible.sync="visible" :before-close="onClose" :close-on-click-modal="false"
            @open="onOpen" width="840px">
            <div class="dialog">
                <el-row class="height">
                    <el-col :span="6" class="dialog-tree height">
                        <div class="tree-height">
                            <el-tree class="tree" :data="data" :props="{ label: 'name' }" accordion
                                @node-click="handleNodeClick"></el-tree>
                        </div>
                        <div>
                            <el-button type="text" @click="addGroup">新增分组</el-button>
                        </div>
                    </el-col>
                    <el-col :span="18">
                        <el-form class="dialog-file">
                            <el-row class="flex">
                                <el-col>
                                    <el-form-item class="search-width">
                                        <el-input size="mini" suffix-icon="el-icon-search" placeholder="搜索文件名称">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col class="flex end">
                                    <el-form-item>
                                        <div class="flex">
                                            <span class="upload-left">大小不能像超过4M</span>
                                            <el-upload class="upload-demo" :action="action" :data="config"
                                                :multiple="true" :show-file-list="false" :fileList="fileList"
                                                :on-success="handleSuccess">
                                                <el-button size="mini"><i class="el-icon-upload icon-size"></i>上传
                                                </el-button>
                                                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                                            </el-upload>
                                        </div>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="file-row">
                                <div class="file-flex">
                                    <el-col :span="4.5" v-for="(item, index) in rows" :key="index">
                                        <div class="dialog-file-item" :class="item.isChecked ? 'dialog-file-check' : ''"
                                            :title="item.fileName" @click="checked(item)">
                                            <div class="file-item-img">
                                                <img :src="item.externalUrl" />
                                            </div>
                                            <div class="file-item-title">{{ item.fileName }}</div>
                                        </div>
                                    </el-col>
                                </div>
                                <div class="file-pagination" v-if="formData.totalCount > 15">
                                    <el-pagination @current-change="onPageChange" :page-size="15"
                                        :total="formData.totalCount" :current-page="formData.pageIndex"
                                        layout="total,  prev, pager, next, jumper">
                                    </el-pagination>
                                </div>
                            </el-row>
                        </el-form>
                    </el-col>
                </el-row>
            </div>

            <template slot="footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </template>
        </el-dialog>

        <add-node ref="addNode" @submit="getTreeList" />
    </div>
</template>

<script>
    import AddNode from "./add-node";

    import {
        FileService
    } from "@/api";

    import {
        copyObj,
        isNullOrEmpty
    } from "@/utils";

    export default {
        components: {
            AddNode,
        },
        props: {
            title: {
                type: String,
                default: "文件库",
            },
            limit: {
                type: Number,
                default: 2,
            },
        },
        data() {
            return {
                action: "http://store_v2.yunfanke.cn",
                fileList: [],
                currentPage4: 4,
                loading: false,
                editing: false,
                visible: false,
                data: [],
                currentGroup: {},
                formData: {
                    groupId: "",
                    pageIndex: 1,
                    pageSize: 15,
                    totalPages: 0,
                    totalCount: 0,
                },
                rows: [],
                config: {
                    groupId: "",
                    path: "",
                },
                ImgArr: [],
                addClass: false,
            };
        },
        mounted() {
            this.action = "http://store_v2.yunfanke.cn" + "/store//upload/file";
        },
        methods: {
            checked(item) {
                if (!item.isChecked) {
                    let checked = this.rows.filter((item) => item.isChecked);
                    if (checked.length >= this.limit) {
                        return;
                    }
                }
                this.$set(item, "isChecked", !item.isChecked);
            },
            submit() {
                let arr = this.rows.filter((item) => item.isChecked == true);
                this.$emit("submit", arr);
            },
            async showDialog() {
                await this.getTreeList();
                this.editing = true;
                this.visible = true;
            },
            async handleNodeClick(data) {
                console.log(data);
                this.currentGroup = data;
                this.formData.groupId = data.groupId;
                this.config.groupId = data.groupId;
                this.config.path = "uploads/" + data.groupId;
                await this.getFileList();
            },
            addGroup() {
                this.$refs.addNode.editRow(this.currentGroup);
            },
            async onPageChange(currentPage) {
                this.formData.pageIndex = currentPage;
                await this.getFileList();
            },
            async getTreeList() {
                let res = await FileService.tree();
                if (res.code == 200) {
                    let arr = [{
                            groupId: "",
                            name: "全部",
                            parentId: 0,
                            sequence: 0,
                            recordState: 0,
                            createTime: "",
                            updateTime: "",
                        },
                        {
                            groupId: 0,
                            name: "未分组",
                            parentId: 0,
                            sequence: 0,
                            recordState: 0,
                            createTime: "",
                            updateTime: "",
                        },
                    ];
                    this.data = [...arr, ...res.result];
                }
            },
            async getFileList() {
                try {
                    this.loading = true;
                    let params = copyObj(this.formData);
                    let res = await FileService.filelist(params);
                    if (res.code === 200) {
                        this.formData.totalCount = res.totalCount;
                        this.formData.totalPages = res.totalPages;
                        this.formData.pageIndex = res.pageIndex;
                        this.formData.pageSize = res.pageSize;
                        this.rows = res.result;
                    }
                } finally {
                    this.loading = false;
                }
            },
            async onOpen() {
                this.loading = true;
                //这里放 打开弹框需要请求的数据方法 需要加 await
                this.loading = false;
            },
            search() {
                console.log("搜索");
            },
            onClose() {
                this.visible = false;
                this.editing = false;
                this.loading = false;
                this.rows = [];
                this.formData = {
                    groupId: "",
                    pageIndex: 1,
                    pageSize: 15,
                    totalPages: 0,
                    totalCount: 0,
                };
            },
            async handleSuccess(file, fileList) {
                console.log("success");
                await this.getFileList();
            },
        },
    };
</script>

<style lang="scss" scoped>
    .dialog {
        height: 510px;
        overflow: hidden;
    }

    .dialog-tree {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-right: 1px solid LightGrey;
    }

    .height {
        height: 100%;
    }

    .tree-height {
        height: 454px;
        display: flex;
        overflow-y: auto;
    }

    .tree-height::-webkit-scrollbar {
        display: none;
    }

    .tree {
        width: 90%;
    }

    .dialog-file {
        padding: 20px;
    }

    .file-flex {
        width: 560px;
        height: 388px;
    }

    .file-row {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
    }

    .file-pagination {
        display: flex;
        justify-content: flex-end;
    }

    .dialog-file-item {
        width: 90px;
        height: 100px;
        padding: 5px 10px 0px 10px;
        border: 1px solid skyblue;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        cursor: pointer;
        margin-bottom: 20px;
        margin-right: 15px;
    }

    .dialog-file-check {
        border: 1px solid orange;
    }

    .file-item-img {
        width: 70px;
        height: 70px;
    }

    .file-item-img img {
        height: 100%;
        width: 100%;
    }

    .file-item-title {
        font-size: 12px;
        width: 100%;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        margin-top: 4px;
    }

    .search-width {
        width: 160px;
    }

    .upload-left {
        font-size: 12px;
        margin-right: 8px;
    }

    .icon-size {
        font-size: 16px;
    }

    //  overflow: hidden;
    //     white-space: nowrap;
    //     text-overflow: ellipsis;
    //     -webkit-box-orient: vertical;
    //     -webkit-line-clamp: 1;
</style>
